{# Landing navbar.

   Links collapse behind a hamburger below md; the project name and the
   Dashboard CTA stay in the top bar at every width so the bar never
   wraps. Alpine drives the toggle — the dropdown dismisses on link tap,
   click-outside, or Escape. #}
<div x-data="{ menuOpen: false }"
     class="border-b border-aegis-border">
  <div class="max-w-screen-xl mx-auto px-6 lg:px-16 py-4 flex items-center gap-4">
    <a href="/" class="text-sm font-semibold text-white tracking-wide flex-none">
      {{ project_name }}
    </a>

    <div class="flex-1"></div>

    <div class="flex items-center gap-4 flex-none">
      <a href="/docs"
         class="hidden md:inline text-xs text-aegis-muted hover:text-white transition-colors">API</a>
      <a href="/health"
         class="hidden md:inline text-xs text-aegis-muted hover:text-white transition-colors">Health</a>
      <a href="/dashboard"
         class="text-xs text-white border border-aegis-teal bg-aegis-teal/10 rounded px-3 py-1.5 hover:bg-aegis-teal/20 transition-colors">
        Dashboard
      </a>

      {# Hamburger — mobile only, toggles the dropdown below. #}
      <button @click="menuOpen = !menuOpen"
              class="md:hidden flex items-center justify-center w-8 h-8 text-aegis-muted hover:text-white transition-colors"
              :aria-expanded="menuOpen"
              aria-label="Toggle menu">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.75" stroke="currentColor" class="w-5 h-5">
          <path x-show="!menuOpen" stroke-linecap="round" stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
          <path x-show="menuOpen" x-cloak stroke-linecap="round" stroke-linejoin="round"
                d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
  </div>

  <div x-cloak
       x-show="menuOpen"
       x-collapse
       @click.outside="menuOpen = false"
       @keydown.escape.window="menuOpen = false"
       class="md:hidden border-t border-aegis-border px-6 py-3">
    <a href="/docs" @click="menuOpen = false"
       class="block py-2 text-sm text-aegis-muted hover:text-white transition-colors">API</a>
    <a href="/health" @click="menuOpen = false"
       class="block py-2 text-sm text-aegis-muted hover:text-white transition-colors">Health</a>
  </div>
</div>